import React, { useRef } from 'react'

/*
  类式组件：3种定义方式(不练习，靠背)
    1. 废弃：  <input ref="input1"/>
    2. 回调：<input ref={(c)=>{this.input1 = c}}
    3. createRef创建ref容器： 
        let myRef = React.createRef()  
        <input ref={this.myRef}/>
*/

/*
  ref：关联的知识点

  表单的组件分类：受控组件、非受控组件
    非受控组件：针对表单元素 现用现取 值
    有几个表单元素，定义几个ref，例如下面代码，点击时，通过ref现取值

    受控组件：针对表单元素，随着输入(通过onChange事件)，维护状态state里的值，就是受控组件
    建议使用受控组件，这里没有ref，例如A006_form里的代码，用value，与onChange配合
*/ 

export default function A005_ref() {
  let inpRef = useRef()
  let divRef = useRef()

  let getRefDom = () => {
    console.log(inpRef.current);
    console.log(divRef.current);
  }

  return (
    <div>A005_ref
      <input ref={inpRef}></input>
      <div ref={divRef}>divRef</div>
      <button onClick={getRefDom}>获取ref</button>
    </div>
  )
}
